<template>
    <div class="box">
        <el-tabs v-model="activeName" tab-position="left" class="demo-tabs" style="height: 100%;">
            <el-tab-pane v-for="(type, index) in fatherType" :key="index" :label="type.serviceName"
                :name="type.id.toString()">
                <template #label>
                    <el-icon>
                        <component :is="getIcon(type.id % 4)" />
                    </el-icon>
                    <span>{{ type.serviceName }}</span>
                </template>
                <div v-if="servicetypeStore.categorizedServices[type.id]" class="card-container">
                    <el-card class=" box-card" v-for="service in categorizedServices[type.id]" :key="service.id"
                        @click="toOrder(type, service)">
                        <el-image :src="service.image" fit="fill"></el-image>
                        <div slot="header" class="clearfix">
                            <span>{{ service.serviceName }}</span>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
        <FrontServiceDialog />
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
// import { useRouter } from 'vue-router'
import { Brush, GoldMedal, Sunny, FirstAidKit } from '@element-plus/icons-vue'
import FrontServiceDialog from "./FrontServiceDialog.vue";
import { storeToRefs } from "pinia";
import { useServicetypeStore } from "../../../stores/servicetype.js";
const servicetypeStore = useServicetypeStore()
const { fatherType, categorizedServices } = storeToRefs(servicetypeStore)
servicetypeStore.selectFather()

const activeName = ref('');
onMounted(async () => {
    await servicetypeStore.selectFather()
    // 设置默认激活的标签页
    if (servicetypeStore.fatherType.length > 0) {
        activeName.value = servicetypeStore.fatherType[0].id.toString();
    }
})

const toOrder = (typeBId, typeSId) => {
    // console.log(typeBId, typeSId);
    servicetypeStore.pre4Order(typeBId, typeSId)
}

/**
 * 根据不同字符串，返回不同Icon组件
 * @param {string } icon
 */
const getIcon = (id) => {
    switch (id) {
        case 1:
            return GoldMedal
        case 2:
            return Brush
        case 3:
            return Sunny
        case 0:
            return FirstAidKit
    }
}
</script>

<style scoped>
.box {
    height: 90vh;
    width: 80%;
    margin-left: 10%;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/* .el-tabs--right .el-tabs__content, */
.el-tabs--left .el-tabs__content {
    height: 100%;
}

/* 
.el-tabs__nav is-left.el-tabs--left .el-tabs__nav.is-left {
    width: 200px
} */

.card-container {
    display: flex;
    /* 允许卡片换行 */
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 10px;
}

.box-card {
    /* 每行4个卡片，减去间距 */
    width: 15%;
    height: 45%;
    /* 卡片之间的间距 */
    margin-right: 10px;
    margin-bottom: 10px;
    /* 确保宽度包括内边距和边框 */
    box-sizing: border-box;
}

/* .box-card:nth-child(4n) { */
/* margin-right: 0; */
/* 每行的最后一个卡片不需要右边距 */
/* } */

.el-image {
    width: 100%;
    height: 100px;
}

.clearfix {
    margin-top: 8px;
    display: flex;
    justify-content: space-around;
}
</style>